<template>
  <div class="dashboard-container">
    <!-- 数据概览卡片 -->
    <el-row :gutter="20">
      <el-col :span="6">
        <el-card shadow="hover" class="data-card">
          <div class="data-item">
            <div class="data-icon" style="background-color: #409EFF;">
              <el-icon><Document /></el-icon>
            </div>
            <div class="data-info">
              <div class="data-title">帖子总数</div>
              <div class="data-value">{{ stats.posts }}</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" class="data-card">
          <div class="data-item">
            <div class="data-icon" style="background-color: #67C23A;">
              <el-icon><ChatDotRound /></el-icon>
            </div>
            <div class="data-info">
              <div class="data-title">评论总数</div>
              <div class="data-value">{{ stats.comments }}</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" class="data-card">
          <div class="data-item">
            <div class="data-icon" style="background-color: #E6A23C;">
              <el-icon><User /></el-icon>
            </div>
            <div class="data-info">
              <div class="data-title">用户总数</div>
              <div class="data-value">{{ stats.users }}</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" class="data-card">
          <div class="data-item">
            <div class="data-icon" style="background-color: #F56C6C;">
              <el-icon><Warning /></el-icon>
            </div>
            <div class="data-info">
              <div class="data-title">待审核内容</div>
              <div class="data-value">{{ stats.pendingReview }}</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 快速操作区域 -->
    <el-card class="quick-actions" shadow="hover">
      <template #header>
        <div class="card-header">
          <span>快速操作</span>
        </div>
      </template>
      <div class="action-list">
        <el-button type="primary" @click="$router.push('/admin/posts')">
          <el-icon><Document /></el-icon>帖子管理
        </el-button>
        <el-button type="success" @click="$router.push('/admin/comments')">
          <el-icon><ChatDotRound /></el-icon>评论管理
        </el-button>
        <el-button type="warning" @click="$router.push('/admin/users')">
          <el-icon><User /></el-icon>用户管理
        </el-button>
        <el-button type="danger" @click="$router.push('/admin/review')">
          <el-icon><View /></el-icon>内容审核
        </el-button>
      </div>
    </el-card>

    <!-- 最近活动区域 -->
    <el-row :gutter="20" class="recent-activity">
      <el-col :span="12">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>最新帖子</span>
              <el-button type="text" @click="$router.push('/admin/posts')">查看更多</el-button>
            </div>
          </template>
          <el-table :data="recentPosts" style="width: 100%" :show-header="false">
            <el-table-column prop="title" label="标题" width="300">
              <template #default="scope">
                <el-tooltip :content="scope.row.title" placement="top" :show-after="1000">
                  <span class="truncate-text">{{ scope.row.title }}</span>
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column prop="date" label="日期" width="120"></el-table-column>
          </el-table>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card shadow="hover">

          <template #header>
            <div class="card-header">
              <span>最新用户</span>
              <el-button type="text" @click="$router.push('/admin/users')">查看更多</el-button>
            </div>
          </template>

          <el-table :data="recentUsers" style="width: 100%" :show-header="true" border>
            <el-table-column prop="username" label="用户名" min-width="300">
              <template #default="scope">
                <div class="user-item">
                  <el-avatar :size="30" :src="scope.row.avatar_url"></el-avatar>
                  <span style="margin-left: 10px">{{ scope.row.username }}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="status" label="状态" width="80">
              <template #default="scope">
                <el-tag :type="scope.row.status === 0 ? 'success' : 'danger'">
                  {{ scope.row.status === 0 ? '正常' : '封禁' }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column label="注册时间" min-width="120">
              <template #default="scope">
                {{ formatDate(scope.row.created_at) }}
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
//import { getDashboardData } from '@/api'
//import axios from "axios";
import {getNewUsers, getUserTotal} from "@/api";

// 数据统计
const stats = ref({
  posts: 0,
  comments: 0,
  users: 0,
  pendingReview: 0
})

// 最近帖子和用户
const recentPosts = ref([])
const recentUsers = ref([])

// 日期格式化函数，格式 YYYY-MM-DD
const formatDate = (dateStr) => {
  if (!dateStr) return ''
  const d = new Date(dateStr)
  const y = d.getFullYear()
  const m = (d.getMonth() + 1).toString().padStart(2, '0')
  const day = d.getDate().toString().padStart(2, '0')
  return `${y}-${m}-${day}`
}

// 加载控制台数据
const loadDashboardData = async () => {
  try {
    const res = await getUserTotal()
    stats.value.users = res.data.data.total_users || 0

    const newUsersRes = await getNewUsers()
    recentUsers.value = newUsersRes.data.data || []

  } catch (error) {
    console.error('获取用户总数失败:', error)
  }
}

onMounted(() => {
  loadDashboardData()
})
</script>

<style scoped>
.dashboard-container {
  padding: 0 10px;
}

/* 数据卡片样式 */
.data-card {
  margin-bottom: 20px;
}

.data-item {
  display: flex;
  align-items: center;
}

.data-icon {
  width: 60px;
  height: 60px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
}

.data-icon .el-icon {
  font-size: 24px;
  color: white;
}

.data-title {
  font-size: 14px;
  color: #909399;
  margin-bottom: 8px;
}

.data-value {
  font-size: 24px;
  font-weight: bold;
}

/* 快速操作区域样式 */
.quick-actions {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.action-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.action-list .el-button {
  margin: 5px;
}

/* 最近活动区域样式 */
.recent-activity {
  margin-bottom: 20px;
}

.truncate-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  max-width: 250px;
}

.user-item {
  display: flex;
  align-items: center;
}
</style> 